<script setup lang="ts">
import{
  ref,getCurrentInstance,defineProps,onMounted
}from "vue";
import Navigation from "@/components/homepageComponents/Navigation.vue"
import SearchBar from "@/components/homepageComponents/SearchBar.vue";
import router from "@/router";
const cinemalist = ref([])
const global=getCurrentInstance().appContext.config.globalProperties;
global.$http.post('/public/cinema/query',{
  params:{
  }
})
    .then(resp=>{
      console.log(resp)
      cinemalist.value=resp.data;
    })
    .then(err=>{
      new Error(err);
    })

const cinemaslideshowlist = ref([])
const global1=getCurrentInstance().appContext.config.globalProperties;
global1.$http.post('/public/slideshow/query',{
    slideshowtype:1
})
    .then(resp=>{
      console.log(resp)
      cinemaslideshowlist.value=resp.data;
    })
    .then(err=>{
      new Error(err);
    })

const myClick = (item) => {
  let userId = localStorage.getItem('userId');
  if (!userId) {
    console.log('11111111')
    router.push({ name: 'LoginView' });
    return;
  } else {
    console.log('22222222222222222')
    console.log(userId)
    router.push({ name: 'movieScheduling', query: { cinemaId: item.cinemaid } });
  }
};

</script>

<template>
  <el-affix  :offset-top="0" :z-index="999">
  <search-bar/>
    <!--热映 影院  -->
        <el-row>
          <!-- 使用路径跳转 -->
          <el-col :span="12" style="border:1px solid black;border-radius: 4px;text-align: center;background: #eeeeee">
            <router-link to="/FilmView" style="color: black;text-decoration: none;">
              <span>热映</span>
            </router-link>
          </el-col>
          <el-col :span="12" style="border:1px solid black;border-radius: 4px;text-align: center;background: darkgrey;color: #f8f8f8">
            <span>影院</span>
          </el-col>
        </el-row>
    </el-affix>

  <!--轮播图-->
  <div>
    <el-carousel height="110px">
      <el-carousel-item v-for="(item, slideshowid) in cinemaslideshowlist" :key="slideshowid">
        <img
            :src="item.slideshowurl"
            class="carousel-image"
        >
      </el-carousel-item>
    </el-carousel>
  </div>

  <el-row v-for="item in cinemalist" :key="item.cinemaid">
    <el-col  style="padding: 5px">
      <!--影院和票价  -->
      <el-row>
        <el-col :span="19" style="font-weight: bold;font-size: large">
         <div @click="myClick(item)">
            {{item.cinemaname}}
         </div>
        </el-col>
        <el-col :span="5" style="font-size: 17px ;color: red;">
          {{item.cinemaprice}}
          <span style="font-size: x-small">元</span>
          <span style="font-size: x-small;color: black;margin-left: 1px">起</span>
        </el-col>
      </el-row>
      <!--影院地址  -->
      <el-row>
        <el-col :span="24" style="font-size: 14px">
          {{item.cinemalocation}}
        </el-col>
      </el-row>

      <!--退，改签，小吃，影城卡  -->
      <el-row style="font-size: xx-small;text-align: center;margin-bottom: 2px">
        <el-col :span="1" style="border:1px solid green;border-radius: 4px;margin-right: 2px;color: green">
          退
        </el-col>
        <el-col :span="2" style="border:1px solid green;border-radius: 4px;margin-right: 2px;color: green">
          改签
        </el-col>
        <el-col :span="2" style="border:1px solid orange;border-radius: 4px;margin-right: 2px;color: orange">
          小吃
        </el-col>
        <el-col :span="3" style="border:1px solid orange;border-radius: 4px;margin-right: 2px;color: orange">
          影城卡
        </el-col>
      </el-row>
      <!--券 可领15元券-->
      <el-row style="font-size: xx-small;text-align: center;margin-bottom: 2px">
        <el-col :span="1" style="background: green;border-radius: 4px;color: #f8f8f8">
          券
        </el-col>
        <el-col :span="5">
          可领15元券
        </el-col>
      </el-row>
      <hr>
    </el-col>
  </el-row>
  <Navigation/>
</template>

<style scoped>

</style>